<template>
	<div ref="dom" class="charts chart-bar"></div>
</template>

<script>
import * as echarts from 'echarts'
import tdTheme from './theme.json'
import { on, off } from '@/libs/tools'
// echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartBar',
  props: {
    value: Array,
    text: String,
    subtext: String,
    series: Array,
    seriesData: Array,
    grid: Object,
    legend: Object,
    tooltip: Object,
    xAxis: Object,
    yAxis: Object,
    title:Object,
    dataZoom:Array
  },
  data () {
    return {
      dom: null
    }
  },
  watch: {
    value: {
      deep: true,
      handler (val) {
        this.intChart()
      }
    },
    series: {
      deep: true,
      handler (val) {
        this.intChart()
      }
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    },
    intChart () {
      var that = this
      this.$nextTick(() => {
        // console.log(y2Data);
        // var labelOption = {
        //     show: true,
        //     position: 'insideBottom',
        //     distance: 15,
        //     align: 'center',
        //     verticalAlign: 'middle',
        //     rotate: 0,
        //     formatter: '{c}  {name|{a}}',
        //     fontSize: 16,
        //     rich: {
        //         name: {
        //             textBorderColor: '#fff',
        //         }
        //     }
        // };
        let option = {
          title: Object.assign({
            text: this.text,
            subtext: this.subtext,
            left: '0',
            textStyle: {
              color: '#BBD0FF',
              fontSize: 14
            }
          }, this.title),
          toolbox: {
            show: false
          },
          tooltip: Object.assign({
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          }, this.tooltip),
          // legend: {
          // 	data: ['成果数量', '被引情况'],
          // 	right: '5%',
          // 	top: '0%',
          // 	itemWidth: 11,
          // 	itemHeight: 11,
          // 	textStyle: {
          // 		// color: '#ffffff',
          // 		fontSize: 13
          // 	}
          // },
          grid: Object.assign({
            top: '10%',
            right: '1%',
            left: '7%',
            bottom: '15%'
          }, this.grid),
          xAxis: Object.assign({
            type: 'category',
            splitLine: {
              show: true,
              lineStyle: {
                type: 'solid',
                color: '#33629F'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#33629F'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#7FA8FF'
              },
							 interval: 0
            }
          }, this.xAxis),
          yAxis: Object.assign({
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                type: 'solid',
                color: '#33629F'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#33629F'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#7FA8FF'
              }
            },
            // interval:10,
            z: 10
          }, this.yAxis),
          dataZoom: this.dataZoom ? this.dataZoom : [],
          series: [
            {
              type: 'bar',
              name: '人数',
              barGap: '-100%',
              barCategoryGap: '60%',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: 'rgba(36, 59, 107, 0.34)'
                  },
                  {
                    offset: 0,
                    color: 'rgba(61, 148, 254, 1)'
                  }
                ])
              },
              emphasis: {
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 1,
                      color: 'rgba(36, 59, 107, 0.34)'
                    },
                    {
                      offset: 0,
                      color: 'rgba(61, 148, 254, 1)'
                    }
                  ])
                }
              },
              label: {
                show: false,
                position: 'top',
                textStyle: {
                  color: '#2378f7'
                }
              },
              data: this.value
            }
            // {
            // 	yAxisIndex:1,
            // 	type: 'bar',
            // 	name: '成果数量2',
            // 	barGap: '-100%',
            // 	barCategoryGap: '60%',
            // 	itemStyle: {
            // 		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            // 			{
            // 				offset: 1,
            // 				color: 'rgba(122, 66, 137, 0.52)'
            // 			},
            // 			{
            // 				offset: 0,
            // 				color: 'rgba(61, 148, 254, 1)'
            // 			}
            // 		])
            // 	},
            // 	emphasis: {
            // 		itemStyle: {
            // 			color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            // 				{
            // 					offset: 1,
            // 					color: 'rgba(122, 66, 137, 0.52)'
            // 				},
            // 				{
            // 					offset: 0,
            // 					color: 'rgba(221, 61, 108, 1)'
            // 				}
            // 			])
            // 		}
            // 	},
            // 	label: {
            // 		show: true,
            // 		position: 'top',
            // 		textStyle: {
            // 			color: '#2378f7'
            // 		}
            // 	},
            // 	data: yData
            // }
          ]
        }

        if (this.legend) {
          option['legend'] = this.legend
        }

        if (this.tooltip) {
          option['tooltip'] = this.tooltip
        }

        if (this.series) {
          var item = this.series
          for (let i in item) {
            if (option.series[i]) {
              Object.assign(option.series[i], item[i])
            } else {
              option.series.push(item[i])
            }
          }
        }
        this.dom = echarts.init(this.$refs.dom, 'tdTheme')
        this.dom.setOption(option)
         this.dom.off('click')
        this.dom.on('click', function(params) {//设置点击事件
           if (params.seriesId=='cyline') {
              that.$emit('changeLingyuChlidren', params.name)
           } else if (params.seriesId=='allsubject') {
              that.$emit('changeModal', params.name, 'index')
           } else if (params.seriesId=='countrySubject') {
              that.$emit('changeModal', params.name, 'pieCountrySubject')
           } else if (params.seriesId=='citySubject') {
              that.$emit('changeModal', params.name, 'pieCitySubject')
           }
		    })
        on(window, 'resize', this.resize)
      })
    }
  },
  mounted () {
    this.intChart()
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
